<!-- @author zhengjie -->
<template>
    <div class="compass-box">
        <div class="compass">
            <div class="direction">
                <div class="east">北</div>
                <div class="south">南</div>
                <div class="west">西</div>
                <div class="north">东</div>
            </div>
            <div class="compass-circle">
                <img :style="{ transform: 'rotate(' + rotation + 'deg)' }" src="@/assets/images/compass.png">
                <div class="angle-text">当前角度:{{ rotation }}°</div>
                <input class="brace" type="range" min="0" max="360" v-model="rotation">

            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'Compass',
    props: {
        angle: {
            type: Number
        },

    },
    mounted() {
        this.rotation = this.angle
    },
    watch: {
        rotation(newValue) {
            this.$emit("upAngle", newValue*1);
        },

    },
    data() {
        return {
            name: '',
            open: false,
            rotation: 0,
        }
    },
    methods: {
        // closeDialog() {//关闭回调
        //     this.$emit("closeDialog", false);
        // },
    }
}
</script>
  
<style rel="stylesheet/scss" lang="scss" scoped>
.compass-box{
    background: #394760;
    height: 320px;
    width: 360px;
    padding: 20px;
    padding-left: 75px;

}
.compass {
    height: 240px;
    width: 220px;
    padding: 20px;


    .compass-circle {
        height: 120px;
        width: 120px;
        margin: 30px;
        border: solid #00D6F6 3px;
        border-radius: 50%;
        position: absolute;

        img {
            height: 85px;
            position: absolute;
            left: 50px;
            top: 15px;
        }

        .brace {
            margin-top: 10px;
            width: 180px;
            margin-left: -25px;
        }

        .angle-text {
            text-align: center;
            margin-top: 180px;
            width: 120px;
            color: #FFFFFF;
            font-size: 18px;
        }
    }

    .direction {
        position: absolute;

        .east,
        .south,
        .west,
        .north {
            color: #00D6F6;
            position: absolute;
            font-size: 20px;
        }

        .east {
            //东
            top: -10px;
            left: 80px;
        }

        .south {
            //南
            top: 165px;
            left: 80px;
        }

        .west {
            //西
            top: 80px;
            left: -10px;
        }

        .north {
            //北
            top: 80px;
            left: 170px;
        }
    }

}</style>
  